<template>
    <div class="index">
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(item, index) in images" :key="index">
                <img v-lazy="item.banner_img" class="img" />
            </van-swipe-item>
        </van-swipe>
        <div class="fenlei">
            <!-- <kinds :kindsList="kindsList.data"></kinds>
            {{kindsList.data}} -->
            <fen>
                <img src="/images/index-kinds-one.png" alt="">
                <template #fen>特色课</template>
            </fen>
            <fen>
              <img src="/images/index-kinds-one.png" alt="">
            <template #fen>一对一辅导</template>
            </fen>

            <fen>
                <img src="/images/index-kinds-study.png" alt="">
                <template #fen>学习日历</template>
                </fen>
        </div>
        <navBottom></navBottom>
        <conten v-for="(item,index) in shoye" :key="index" :item="item"></conten>
    </div>
</template>

<script setup>
import axios from "axios"
import {ref, reactive, onMounted } from "vue"
import conten from "../../src/components/conten/conten.vue"
import fen from "../../src/components/fen/fen.vue"
// import kinds from "../../src/components/kinds/index.vue"
import { getshoye, getbanner } from "../http/banner"
import { useRouter } from "vue-router"
const {push} =useRouter()
const shoye=ref([])
const images = ref([])
// const kindsList = reactive({ data: [] })
onMounted(() => {
    getshoyeFn(),
    getbannerFn()
        // get()
})
const getbannerFn = async () => {
    let res = await getbanner()
    images.value = res.data
}
const getshoyeFn = async ()=>{
    let res = await getshoye()
    // console.log(res);
    shoye.value = res.data
}
const toDetail=(id)=>{
    push({ path: '/detail', query: { id: id } })
}
// const get = () => {
//     axios.get('/api/stations').then((res) => {
//        // console.log(res.data.data);
//         kindsList.data = res.data.data
//     })
// }
</script>

<style lang="scss">
.img {
    width: 100vw;
    height: 250px;
}

.index {
    background-color: #ddd;
}

.van-swipe {
    position: relative;
    margin-bottom: 100px;
}

.fenlei {
    margin-left: 5vw;
    width: 90vw;
    height: 120px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 210px;
}
</style>
